<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="800"  destroy-on-close @closed="$emit('closed')" align-center>
        <el-button type="primary" @click="print">打印</el-button>
        <el-main class="printMain" ref="printMain">
            <div class="title">Receipt</div>
            <table border="1" style="border-collapse: collapse; width: 100%;">
                <thead>
                    <tr style="height: 32px;line-height: 32px;font-size: 18px">
                        <th class="table_border" style="width: 80px;color: #000;">Date</th>
                        <th class="table_border" colspan="3" style="text-align: left;padding-left: 10px;color: #000;">{{customer_name}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in table" :key="index" style="font-size: 18px;">
                        <td class="table_border" style="width: 80px">{{item.date}}</td>
                        <td class="table_border">
                            <div class="div_border div_height">Today Amount: <span style="font-weight: bold;color: #000;">{{item.today_amount}}</span></div>
                            <div class="div_border div_height">Today Cash: <span style="font-weight: bold;color: #000;">{{item.today_cash}}</span></div>
                            <div class="div_height">Today Bank: <span style="font-weight: bold;color: #000;">{{item.today_bank}}</span></div>
                        </td>
                        <!-- <td class="table_border">Today Amount: 0.00</td>
                        <td class="table_border">Today Cash: 0.00</td>
                        <td class="table_border">Today Bank: 0.00</td> -->
                        <td class="table_border">Balance：<span style="font-weight: bold;color: #000;">{{item.balance}}</span></td>
                    </tr>
                </tbody>
            </table>
        </el-main>
	</el-dialog>
</template>

<script>
import print from '@/utils/print'
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			dialog: {
				client: false
			},
			mode: "add",
			titleMap: {
				print: '打印',
			},
			visible: false,
            table: [],
            customer_name: "",
		}
	},
	mounted() {
	},
	methods: {
        print(){
            print(this.$refs.printMain)
            setTimeout(()=>{
                this.visible = false
            },500)
        },
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
        async setData(data) {
            this.customer_name = data.customer_name
            var res = await this.$API.business.finance.collect.print.post({customer_id: data.id,  date: data.print_date});
            this.table = res.data
        },
	}
}
</script>

<style lang="scss" scoped>
.title {
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}
td{
    text-align: center;
}
.table_border{
    width: 220px;
    height: 32px;
}
table{
    tbody{
        tr {
            page-break-inside: avoid;
            -webkit-region-break-inside: avoid; 
        }
        tr:last-child{
            page-break-after: avoid;
            
        }
    }
} 
.div_border{
    border-bottom: 1px solid #808080;
}
.div_height{
    height:32px;
    line-height: 32px;
    text-align: left;
    padding-left: 10px;
}
</style>
